<template>
    <div class="fill">
        <el-container class="fill">
            <el-header>
                <div class="c-title">设备基础信息</div>
                <el-row type="flex" justify="end">
                    <el-button type="primary" @click="factoryReset">恢复出厂设置</el-button>
                    <el-button type="primary" @click="refreshDeviceStatus">刷新</el-button>
                </el-row>
            </el-header>
            <el-main class="fill">
                <div class="fill" v-if="requestStatus === 0">
                    <loading class="c-center"></loading>
                </div>
                <div class="fill" v-else-if="requestStatus === 1">
                    <div class="c-center">
                        <animate-border style="color: #e34981; font-weight: bold">加载数据失败，请刷新重试</animate-border>
                    </div>
                </div>
                <div class="fill" v-else>
                    <el-col>
                        <el-row type="flex" justify="start">
                            <el-col :span="3" class="c-title" align="start">
                                设备名:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.deviceName != null ? deviceStatus.deviceName : "未设置"}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                设备SN号:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.boxSn}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                Mac地址:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.mac}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                设备型号:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.model}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                设备版本号:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.softVersion}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                设备容量:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                可用容量 - {{deviceStatus.currentSize}} / 总容量 - {{deviceStatus.totalSize}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                网络状态:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus['netType']}}
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="start" style="margin-top: 10px">
                            <el-col :span="3" class="c-title" align="start">
                                正在播放计划:
                            </el-col>
                            <el-col :span="21" class="c-title" align="start">
                                {{deviceStatus.scheduleName != null ? deviceStatus.scheduleName : "无计划播出"}}
                            </el-col>
                        </el-row>
                    </el-col>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "DeviceStatus",
        data() {
            return {
                // 设备状态信息
                deviceStatus: null,
                // 请求状态
                // 0 - 请求中
                // 1 - 请求失败
                // 2 - 请求成功
                requestStatus: 0,
            }
        },
        mounted() {
            this.refreshDeviceStatus();
        },
        methods: {
            // 刷新设备状态
            refreshDeviceStatus() {
                const vue = this;
                vue.requestStatus = 0;
                this.$request.request({
                    tag: 'request',
                    wrapper: this.$request.getDeviceStatus()
                }).result({
                    success: result => {
                        vue.deviceStatus = result;
                        vue.deviceStatus['currentSize'] = vue.sizeFormat(vue.deviceStatus['currentSize']);
                        vue.deviceStatus['totalSize'] = vue.sizeFormat(vue.deviceStatus['totalSize']);
                        switch (result['netType']) {
                            case 0:
                                vue.deviceStatus['netType'] = "热点模式";
                                break;
                            case 1:
                                vue.deviceStatus['netType'] = "WIFI 模式";
                                break;
                            case 2:
                                vue.deviceStatus['netType'] = "有线模式";
                                break;
                            default:
                                vue.deviceStatus['netType'] = "无可用网络";
                                break;
                        }
                        console.log(result);
                        vue.requestStatus = 2;
                    },
                    failure: msg => {
                        vue.requestStatus = 1;
                        this.$message.error(msg);
                    }
                })
            },
            // 恢复出厂设置
            factoryReset() {
                const vue = this;
                this.$confirm('此操作将让设备恢复出厂设置, 一切数据都会丢失, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$request.request({
                        wrapper: vue.$request.factoryReset()
                    }).result({
                        success: () => {
                            this.$message.success('恢复出厂设置成功');
                        },
                        error: () => {
                            this.$message.error('恢复出厂设置失败');
                        }
                    })
                }).catch(() => {

                });
            }
        }
    }
</script>

<style scoped>

</style>